<template>
	<section class="todoapp">
		<TodoHeaderVue :arr="list" @add="addFn"></TodoHeaderVue>
		<TodoMainVue :arr="list" @del="delFn"></TodoMainVue>
		<TodoFooterVue @changeType="changeFn" :arr="list" @clearDone="clearDoneFn"></TodoFooterVue>
	</section>
</template>

<script>
import './styles/base.css'
import './styles/index.css'
	// 样式引入 + 导入组件并注册使用
	import TodoHeaderVue from './components/TodoHeader.vue';
	import TodoMainVue from './components/TodoMain.vue';
	import TodoFooterVue from './components/TodoFooter.vue';


	export default {
		data() {
			return {
				type:'all',
				list:JSON.parse(localStorage.getItem('vuetodo'))||[]
			};
		},
		components:{
			TodoHeaderVue,
			TodoMainVue,
			TodoFooterVue,
		},
		watch:{
			list:{
				deep:true,
				handler(){
					localStorage.setItem('vuetodo',JSON.stringify(this.list))
				}
			}
		},		
		computed:{
			 showList(){
				if (this.type==='active') {
					return this.list.filter((item)=>item.isDone===false)
				}else if(this.type==='complete'){
					return this.list.filter((item)=>item.isDone)
				}else{
					return this.list
				}
			},

		},
		methods:{
			//添加功能
			addFn(name){
				this.list.unshift({
					id:+ new Date(),
					name,
					isDone:false
				})
			},
			// 删除功能
			delFn(id){
				this.list=this.list.filter(item=>item.id!=id)
			},
			//清除已完成
			clearDoneFn(){
				this.list=this.list.filter(item=>!item.isDone)
			},
			//切换效果
			changeFn(type){
				this.type=type
			}
		}
	};
</script>
